<template>
	<view class="pageview">
		<cl-navbar :title="$t('my.index.realName')" leftIconSize="40rpx" placeholder autoBack>
		</cl-navbar>
		<view class="position-relative" style="flex: 1;">
			<view class="p-2">
				<view class="box-bg rounded p-2">
					<u-steps :current="stepsCurrent" dot >
						<u-steps-item title="录入信息"></u-steps-item>
						<u-steps-item :title="step2Title"></u-steps-item>
						<u-steps-item :error="iserror" :title="step3Title"></u-steps-item>
					</u-steps>
				</view>
			</view>
			<view class="p-2">
				<view class="">
					<text class="font32">上传身份证照片</text>
				</view>
				<view class="">
					<text class="colorC font28">我确认该身份证影像是本人名下最新且有效身份影像</text>
				</view>
				<view class="pt-3 grid-col2 grid-space10">
					<view class="">
						<view class="box-bg rounded-lg position-relative isbox">
							<image src="/static/playlet/cardz.jpg" style="width:100%;height: 220rpx" class="rounded-lg"
								mode="scaleToFill"></image>
							<view class="position-absolute left-0 right-0 bottom-0 top-0 ">
								<u-upload :fileList="fileList_cardz" name="cardz" @afterRead="afterRead"
									@delete="deletePic"
									:deletable="user_info.real_name_auth_status != '1' && user_info.real_name_auth_status != '2'"
									multiple :maxCount="1" :width="upWidth+'px'" :height="upHeight+'px'">
									<view
										class="position-absolute top-0 left-0 right-0 left-0 bottom-0 flex justify-center align-center">
										<u-icon name="plus-circle-fill" color="#2979ff" size="25"></u-icon>
									</view>
								</u-upload>
							</view>
						</view>
					</view>
					<view class="">
						<view class="box-bg rounded-lg position-relative isbox">
							<image src="/static/playlet/cardb.jpg" style="width:100%;height: 220rpx" class="rounded-lg"
								mode="scaleToFill"></image>
							<view class="position-absolute left-0 right-0 bottom-0 top-0 ">
								<u-upload :fileList="fileList_cardb" name="cardb" @afterRead="afterRead"
									@delete="deletePic"
									:deletable="user_info.real_name_auth_status != '1' && user_info.real_name_auth_status != '2'"
									multiple :maxCount="1" :width="upWidth+'px'" :height="upHeight+'px'">
									<view
										class="position-absolute top-0 left-0 right-0 left-0 bottom-0 flex justify-center align-center">
										<u-icon name="plus-circle-fill" color="#2979ff" size="25"></u-icon>
									</view>
								</u-upload>
							</view>
						</view>
					</view>
				</view>
				<view class="pt-2">
					<view class="box-bg rounded p-3">
						<view class="mb-2">
							<text class="colorF font32">录入身份信息</text>
						</view>
						<view class="p-2 rounded-lg" style="border: solid 1rpx #b9b9b9;">
							<u-input placeholder="请输入姓名" border="none" disabledColor="transparent" v-model="id_name" :disabled="user_info.real_name_auth_status == '1' || user_info.real_name_auth_status == '2'">
								<u--text text="姓名" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
						</view>
						<view class="mt-3 p-2  rounded-lg" style="border: solid 1rpx #b9b9b9;">
							<u-input placeholder="请输入身份证号"  border="none" disabledColor="transparent" v-model="id_card_number" :disabled="user_info.real_name_auth_status == '1' || user_info.real_name_auth_status == '2'">
								<u--text text="身份证号" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
							</u-input>
						</view>
					</view>
				</view>

				
				<view style="color: #ED3737;max-width: 600rpx;text-align: center;margin: 0 auto 100rpx;" class="p-2 pt-4">{{details}}
				</view>
			</view>

			<view class="position-fixed bottom-0 left-0 right-0 safe-bottom"
				v-if="user_info.real_name_auth_status != '2' && user_info.real_name_auth_status != '1'">

				<view class="p-2 px-5"
					v-if="user_info.real_name_auth_status == '0' || user_info.real_name_auth_status == '3'">
					<u-button :text="user_info.real_name_auth_status == '3'?'重新提交':'提交'" shape="circle"
						:customStyle="{color:'#ffffff'}" color="#ED3737" @click="submit"></u-button>
				</view>
			</view>

			<!-- <view class="position-absolute top-0 left-0 right-0 bottom-0"
				style="background-color: rgba(0, 0, 0, 0.5);z-index: 9999;display: flex;align-items: center;justify-content: center;"
				v-else-if="user_info.real_name_auth_status == '1'">
				<text style="color: #ED3737;">审核中...</text>
			</view> -->
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import mediaCache from '@/common/mediacache/mediaCache.js'; // 适配你的实际路径
	import upload from '@/common/upload/upload.js'
	export default {
		data() {
			return {
				id_name: '',
				id_card_number: '',
				fileList_cardz: [],
				fileList_cardb: [],
				details: '',
				upWidth: 0,
				upHeight: 0,
				stepsCurrent:0,
				step2Title:'待提交',
				step3Title:'审核',
				iserror:false
			};
		},
		onLoad() {
			this.getUserAuthInfo()
		},
		computed: {
			...mapState({
				user_info: state => state.user.user_info,
			}),
		},
		mounted() {
			this.getbox()
		},
		methods: {
			getbox() {
				let that = this
				const query = uni.createSelectorQuery();
				//获取宽度
				query.select('.isbox').fields({
					size: true
				}, (res) => {
					const width = res.width;
					const height = res.height;
					that.upWidth = res.width;
					that.upHeight = res.height;
					console.log(width)
					console.log(height)
				}).exec();
			},
			async getUserAuthInfo() {
				try {
					let res = await uni.$api.user.userAuthInfo()
					if (res && res.code == 200) {
						//更新用户信息
						this.$store.dispatch('uploadUserInfo', {
							"real_name_auth_status": res.data.audit_status + ''
						})
						console.log("更新用户信息----",res.data.audit_status);
						
						this.details = res.data.audit_instructions
						this.id_name = res.data.id_name
						this.id_card_number = res.data.id_card_number
						if(res.data.audit_status == '1'){
							this.stepsCurrent=1
							this.step2Title="审核中"
						}else if(res.data.audit_status == '2'){
							this.stepsCurrent=2
							this.step3Title="成功"
						}else if(res.data.audit_status == '3'){
							this.stepsCurrent=2
							this.step3Title="失败"
							this.iserror=true
						}
						if (res.data.audit_status != '0') {
							this.fileList_cardz = [{
								url: '/static/playlet/cardz.jpg',
							}]
							this.fileList_cardb = [{
								url: '/static/playlet/cardb.jpg',
							}]
							mediaCache.loadMedia(res.data.front_side, 'chat', 'image').then(img => {
								this.fileList_cardz = [{
									url: img,
								}]
							})
							mediaCache.loadMedia(res.data.back_side, 'chat', 'image').then(img => {
								console.log(img);
								this.fileList_cardb = [{
									url: img,
								}]
							})
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList_${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList_${event.name}`].length
				lists.map((item) => {
					this[`fileList_${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					try {
						let upload_res = await upload.uploadFile(lists[i].url, 'chat', 'image', null, 'card/')
						let item = this[`fileList_${event.name}`][fileListLen]
						this[`fileList_${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							upurl: upload_res.url
						}))
						fileListLen++
					} catch (e) {
						let item = this[`fileList_${event.name}`][fileListLen]
						this[`fileList_${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'failed',
							message: ''
						}))
						fileListLen++
					}
				}
			},
			async submit() {
				if (!this.fileList_cardz.length) {
					uni.showToast({
						title: "请上传人像面",
						icon: 'none'
					})
					return
				}
				if (this.fileList_cardz[0].status == 'uploading') {
					uni.showToast({
						title: "请等待人像面上传完成",
						icon: 'none'
					})
					return
				}
				if (this.fileList_cardz[0].status == 'failed') {
					uni.showToast({
						title: "人像面上传失败,请重新上传",
						icon: 'none'
					})
					return
				}
				if (!this.fileList_cardb.length) {
					uni.showToast({
						title: "请上传国徽面",
						icon: 'none'
					})
					return
				}
				if (this.fileList_cardb[0].status == 'uploading') {
					uni.showToast({
						title: "请等待国徽面上传完成",
						icon: 'none'
					})
					return
				}
				if (this.fileList_cardb[0].status == 'failed') {
					uni.showToast({
						title: "国徽面上传失败,请重新上传",
						icon: 'none'
					})
					return
				}
				try {
					let res = await uni.$api.user.userAuthAdd({
						front_side: this.fileList_cardz[0].upurl,
						back_side: this.fileList_cardb[0].upurl,
						id_name: this.id_name,
						id_card_number: this.id_card_number
					})
					if (res && res.code == 200) {
						//更新用户信息
						this.$store.dispatch('uploadUserInfo', {
							"real_name_auth_status": "1"
						})
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							this.$Router.back()
						}, 1000)
					}
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-steps-item__wrapper {
		background-color: #ffffff !important;
	}

	/deep/ .u-steps-item__content .u-text__value--main {
		color: #eeeeee;
	}
</style>